From 2f991e680bea37d1f97ea77df2343200f3899817 Mon Sep 17 00:00:00 2001
From: Anurag <anurag4884@gmail.com>
Date: Wed, 28 Feb 2024 21:13:25 +0530
Subject: feat: initialise a new totals tab with basic UI (#94)

* feat: initialise a new totals tab with basic UI

* fix: update group tabs and add stats page

* fix: styling within the new elements

* Prettier

* Display active user expenses only if active user is set

---------

Co-authored-by: Sebastien Castiel <sebastien@castiel.me>
---
 .../[groupId]/stats/totals-your-spending.tsx       | 30 ++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/app/groups/[groupId]/stats/totals-your-spending.tsx

(limited to 'src/app/groups/[groupId]/stats/totals-your-spending.tsx')

diff --git a/src/app/groups/[groupId]/stats/totals-your-spending.tsx b/src/app/groups/[groupId]/stats/totals-your-spending.tsx
new file mode 100644
index 0000000..f621a41
--- /dev/null
+++ b/src/app/groups/[groupId]/stats/totals-your-spending.tsx
@@ -0,0 +1,30 @@
+'use client'
+import { getGroup, getGroupExpenses } from '@/lib/api'
+import { useActiveUser } from '@/lib/hooks'
+import { getTotalActiveUserPaidFor } from '@/lib/totals'
+import { formatCurrency } from '@/lib/utils'
+
+type Props = {
+  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
+  expenses: NonNullable<Awaited<ReturnType<typeof getGroupExpenses>>>
+}
+
+export function TotalsYourSpendings({ group, expenses }: Props) {
+  const activeUser = useActiveUser(group.id)
+
+  const totalYourSpendings =
+    activeUser === '' || activeUser === 'None'
+      ? 0
+      : getTotalActiveUserPaidFor(activeUser, expenses)
+  const currency = group.currency
+
+  return (
+    <div>
+      <div className="text-muted-foreground">Total you paid for</div>
+
+      <div className="text-lg">
+        {formatCurrency(currency, totalYourSpendings)}
+      </div>
+    </div>
+  )
+}
-- 
cgit v1.3